<template>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img
      v-if="imageUrl"
      :src="imageUrl"
      class="avatar"
    >
    <i
      v-else
      class="el-icon-plus avatar-uploader-icon"
    >提交图片</i>
    <span class="el-icon-circle-close cancle"></span>
  </el-upload>
</template>

<script>
export default {
  data () {
    return {
      imageUrl: ''
    }
  },
  created () {},
  methods: {
    handleAvatarSuccess (res, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log(res)
      console.log(file.raw)
      console.log(fileList)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },

  components: {},

  computed: {}

}

</script>
<style  scoped lang='scss'>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 14px;
  color: #8c939d;
  width: 120px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 10px;
}
.avatar {
  width: 110px;
  height: 55px;
  display: block;
}
::v-deep .el-upload.el-upload--text {
  position: relative;
}
::v-deep .cancle {
  font-size: 16px;
  color: #d9d9d9;
  position: absolute;
  right: -8px;
  top: -6px;
}
</style>
